<template>
	<view class="page">
		<view class="mengceng1"></view>
		<view class="mengceng2"></view>
		<view class="nav flex_r_between" @click="$native.backAction()">
			<view class="icon flex_r_around">
				<u-icon bold name="arrow-left" size="32rpx" color="#3D3D3D"></u-icon>
			</view>
			<text>礼物展馆</text>
			<view class="icon"></view>
		</view>
		
		<view class="title flex_r_between" v-if="list.length" @click="$native.toGiftGrid(user_id)">
			<text>已点亮</text>
			<u-icon name="arrow-right" size="28rpx" color="#666666"></u-icon>
		</view>
		<view class="grid">
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in list" :key="index" @click="openDetail(item)">
					<view class="item have flex_c">
						<view class="top">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="center">
							{{ item.name }}
						</view>
						
						<view class="bottom flex_r_around">
							<!-- <image :src="item.avatar" mode="aspectFill"></image> -->
							<text>点亮</text>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="title flex_r_between" v-if="not_have_list.length" @click="$native.toGiftGrid(user_id)">
			<text>未点亮</text>
			<u-icon name="arrow-right" size="28rpx" color="#666666"></u-icon>
		</view>
		
		<view class="grid">
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in not_have_list" :key="index">
					<view class="item have flex_c">
						<view class="top">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="center">
							{{ item.name }}
						</view>
						
						<view class="bottom flex_r_around">
							<text>未点亮</text>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view @touchmove.stop.prevent="preventHandler">
			<giftPopup ref="giftPopup"></giftPopup>
		</view>
		
	</view>
</template>

<script>
	import giftPopup from './components/gift-popup/gift-popup.vue';
	export default {
		components: {
			giftPopup,
		},
		data() {
			return {
				list: [],
				not_have_list: [],
				
				user_id: 0,
			}
		},
		methods: {
			openDetail(item) {
				this.$refs.giftPopup.user_id = this.user_id;
				this.$refs.giftPopup.gift_id = item.id;
				this.$refs.giftPopup.open();
			},
			getList() {
				this.$get('/gift/getGiftStatus', {
					user_id: this.user_id,
					type: 1
				}).then(res => {
					this.list = res.data.list;
					this.not_have_list = res.data.not_have_list;
				})
			},
		},
		
		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.user_id = option.user_id;
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	
	.page {
	}
	
	.mengceng1 {
		width: 362rpx;
		height: 362rpx;
		background: #E5F7FE;
		filter: blur(23rpx);
		position: absolute;
		top: -180rpx;
		left: 32rpx;
		z-index: 1;
		opacity: 0.6;
		pointer-events: none;
	}
	
	.mengceng2 {
		width: 362rpx;
		height: 362rpx;
		background: #F7EBFB;
		filter: blur(23rpx);
		position: absolute;
		top: -180rpx;
		right: 32rpx;
		z-index: 1;
		opacity: 0.6;
		pointer-events: none;
	}
	
	.nav {
		position: relative;
		z-index: 10;
		height: 108rpx;
		background: transparent;
	
		.icon {
			width: 108rpx;
			height: 108rpx;
		}
	
		text {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}
	}

	.grid {
		padding: 0 32rpx;
		position: relative;
		z-index: 2;
		.item {
			width: 160rpx;
			height: 208rpx;
			background: #F4F0FF;
			border-radius: 24rpx;
			justify-content: space-between;
			overflow: hidden;
			margin-bottom: 12rpx;
			
			.top {
				width: 128rpx;
				height: 128rpx;
				image {
					width: 128rpx;
					height: 128rpx;
				}
			}
			
			.center {
				font-size: 24rpx;
				color: #333333;
				line-height: 24rpx;
			}
			
			.bottom {
				width: 160rpx;
				height: 44rpx;
				background: #E9E1FE;
				padding: 0 36rpx;
				
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #666666;
					line-height: 24rpx;
				}
			}
		}
	}


	.title {
		margin: 40rpx 0 24rpx;
		padding: 0 32rpx;
		position: relative;
		z-index: 2;
		text {
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
		}
	}

</style>
